<template>

<!-- 海报管理 预览-详情 不可编辑 -->
  <div class="previewDialog" v-if="dialogVisible">
    <div class="preview_content">
      <div class="preview_contents">
         <iframe id="preview_iframe" v-if="type !== 'posters'" :src="url" frameborder="0"></iframe>
        <img class="caseUrl" v-else :src="url" alt="">
      </div>
      <div class="icon_close" @click="close"></div>
    </div>
    <div class="preview_model" @click="close"></div>
  </div>

</template>

<script>
export default {
  name: 'previewDialog',
  props: {
    type: {
      type: String
    }
  },
  data() {
    return {
      dialogVisible: false,
      url: ''
    }
  },
  methods: {
    open(url) {
      this.url = url;
      this.dialogVisible = true;
    },
    close() {
      this.url = '';
      this.dialogVisible = false;
    },
  }

}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .previewDialog{
    width: 100%;
    height:100%;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: auto;
    margin: 0;
    z-index: 2117;
    .preview_content{
      position: absolute;
      width: 348px;
      height: 610px;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
      -moz-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      background: url('http://yonyou-cyx-product.oss-cn-shanghai.aliyuncs.com/oss/20190510/b2c0dab5319f4b449f0bdd3bb3cd33f2.png') no-repeat;
      background-size: 100% 100%;
      z-index: 2119;
      .preview_contents{
        width: 234px;
        height: 417px;
        margin-top: 93px;
        margin-left: 60px;
        background: #fff;
        #preview_iframe{
          width: 100%;
          height: 100%;
        }
        .caseUrl{
          display: block;
          width:100%;
          // height: 100%;
          overflow: hidden;
        }
      }
      .icon_close{
        position: absolute;
        width: 19px;
        height: 19px; cursor: pointer;
        top: 0;
        right: 0;
        background: url('../../assets/img/icon_close@2x.png') no-repeat;
        background-size: 100% 100%;
      }
    }
    .preview_model{
      position: fixed;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      opacity: .5;
      background: #000;
      z-index: 2118;
    }
  }
  .img{
    width: 120px;
  }
</style>

